<template>
  <div id="QuestionStep">
    <a-tab-pane class="customTabPane" title="做题步骤">
      <a-card v-if="notice" :title="notice.title" class="centerCard">
        <MdView :value="notice.content || ''" class="customContent" />
      </a-card>
    </a-tab-pane>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

import MdView from "@/components/MdView.vue";
import { NoticeVO } from "@/views/Home/NoticeVO";

const notice = ref<NoticeVO>();
// 直接给notice赋值
notice.value = {
  title: "做题步骤",
  content:
    "### 一、题库列表\n" +
    "\n" +
    "进入界面我们可以看到许许多多的题目，点击题目即可进入做题；\n" +
    "\n" +
    "1、当然我们也可以根据不同的标签选择适合自己或者自己想要做的题目。\n" +
    "\n" +
    "2、点击随机一题则会随机进入一道题库中的题目\n" +
    "\n" +
    '<img src="https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E9%A2%98%E5%BA%93%E5%88%97%E8%A1%A8.png" style="zoom: 50%;" />\n' +
    "\n" +
    "### 二、题目界面\n" +
    "\n" +
    "#### 1、题目描述\n" +
    "\n" +
    "如下图，我们可以看到页面中的功能很全面，包括题目描述，题解，提交记录，题库，题目切换，运行，提交等。\n" +
    "\n" +
    '<img src="https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E9%A2%98%E7%9B%AE%E8%AF%A6%E7%BB%86.png" style="zoom: 33%;" />\n' +
    "\n" +
    "#### 2、题解\n" +
    "\n" +
    "如果在编写代码过程中遇到些许问题，点击题解即可查看详细题解，采用Markdown编辑器整理的题解，其中包括图片，输入输出用例等，使界面更加清爽，整洁，且简单易懂。\n" +
    "\n" +
    '<img src="https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E9%A2%98%E8%A7%A3.png" style="zoom: 25%;" />\n' +
    "\n" +
    "### 三、开始做题\n" +
    "\n" +
    "我们可以自行在代码编辑区编写代码，通过阅读题目描述，模拟输入输出用例来编写代码，并且可以通过“运行”功能来进行**在线校验**，提交功能则会把代码提交给后台代码沙箱进行判题，并将结果存入数据库进行记录。\n" +
    "\n" +
    "#### 1、运行\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E8%BF%90%E8%A1%8C.png)\n" +
    "\n" +
    "#### 2、提交\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E6%8F%90%E4%BA%A4.png)\n" +
    "\n" +
    "### 四、查看结果\n" +
    "\n" +
    "在运行，提交等一些系列操作之后，我们可以在提交记录中查看到结果，因为此系统重点偏向于**评测**，所以这里定义了多种错误类别来评测用户提交的代码（这里的错误类别采用的是后端枚举方法，详见附录）\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E6%8F%90%E4%BA%A4%E8%AE%B0%E5%BD%95.png)\n" +
    "\n" +
    "### 五、其他功能\n" +
    "\n" +
    "上述一系列操作是做题的核心流程，接下来还有一些其他的功能来便于大家使用\n" +
    "\n" +
    "#### 1、题库列表\n" +
    "\n" +
    "如果想要立即切换题目，点击题库即可，列表中会显示完整的题库列表\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E5%81%9A%E9%A2%98%E7%95%8C%E9%9D%A2%E7%9A%84%E9%A2%98%E5%BA%93%E5%88%97%E8%A1%A8.png)\n" +
    "\n" +
    "#### 2、格式化代码\n" +
    "\n" +
    "对自己编写的代码很不理想怎么办？点击格式化即可将代码初始化为原始模版\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E6%A0%BC%E5%BC%8F%E5%8C%96%E4%BB%A3%E7%A0%81.png)\n" +
    "\n" +
    "#### 3、点赞与收藏\n" +
    "\n" +
    "遇到自己喜欢的题目，点击下方的点赞与收藏即可保留\n" +
    "\n" +
    "![](https://oj-1324519440.cos.ap-beijing.myqcloud.com/%E4%B8%BB%E9%A1%B5%E5%85%AC%E5%91%8A%2F%E9%A2%98%E7%9B%AE%E7%82%B9%E8%B5%9E%E4%B8%8E%E6%94%B6%E8%97%8F.png)\n" +
    "\n" +
    "### 六、附录\n" +
    "\n" +
    "详细的错误示例\n" +
    "\n" +
    "```java\n" +
    'ACCEPTED\t\t\t\t\t("通过", "Accepted"),\n' +
    'WRONG_ANSWER\t\t\t\t("错误解答", "Wrong Answer"),\n' +
    'COMPILE_ERROR\t\t\t\t("编译错误", "Compile Error"),\n' +
    'MEMORY_LIMIT_EXCEEDED\t\t("超出内存限制", "Memory Limit Exceeded"),\n' +
    'TIME_LIMIT_EXCEEDED\t\t\t("超出时间限制", "Time Limit Exceeded"),\n' +
    'PRESENTATION_ERROR\t\t\t("展示错误", "Presentation Error"),\n' +
    'WAITING\t\t\t\t\t\t("等待中", "Waiting"),\n' +
    'OUTPUT_LIMIT_EXCEEDED\t\t("超出输出限制", "Output Limit Exceeded"),\n' +
    'DANGEROUS_OPERATION\t\t\t("危险操作", "Dangerous Operation"),\n' +
    'RUNTIME_ERROR\t\t\t\t("运行错误", "Runtime Error"),\n' +
    'SYSTEM_ERROR\t\t\t\t("系统错误", "System Error");\n' +
    "```",
};
</script>

<style>
#QuestionStep {
  max-width: 100%;
  margin: 0 auto;
}
.centerCard {
  font-size: 18px; /* 调整内容文字大小为16px */
}
.customContent {
  font-size: 20px; /* 调整内容文字大小为16px */
}

#viewQuestionView .arco-space-horizontal .arco-space-item {
  margin-bottom: 0 !important;
}
</style>
